'use client';

import { useState } from 'react';
import { Form, Input, Button, Card, Typography, Message } from '@arco-design/web-react';
import { IconUser, IconLock, IconPhone, IconIdcard } from '@arco-design/web-react/icon';
import { useRouter } from 'next/navigation';
import { customerApi } from '@/services/api';
import Link from 'next/link';
import { Customer } from '@/types';

const FormItem = Form.Item;
const { Title, Text } = Typography;

export default function RegisterPage() {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);
  const router = useRouter();

  const handleSubmit = async (values: any) => {
    setLoading(true);
    try {
      // 移除确认密码字段
      const { confirmPassword, ...customerData } = values;

      // 调用注册 API
      const response = await customerApi.register(customerData as Omit<Customer, 'customerID'>);

      if (response.code === 200) {
        Message.success('注册成功，请登录');
        router.push('/login');
      } else {
        // Message.error(response.message || '注册失败，请稍后重试');
      }
    } catch (error) {
      console.error('注册错误:', error);
      // Message.error('注册过程中发生错误');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="flex justify-center items-center py-8">
      <Card className="w-full max-w-md shadow-md">
        <div className="text-center mb-6">
          <Title heading={3}>客户注册</Title>
          <Text type="secondary">创建您的账户以使用酒店服务</Text>
        </div>

        <Form
          form={form}
          layout="vertical"
          onSubmit={handleSubmit}
          autoComplete="off"
        >
          <FormItem
            label="用户名"
            field="username"
            rules={[
              { required: true, message: '请输入用户名' },
              { minLength: 4, message: '用户名至少需要4个字符' }
            ]}
          >
            <Input
              prefix={<IconUser />}
              placeholder="请输入用户名"
            />
          </FormItem>

          <FormItem
            label="密码"
            field="password"
            rules={[
              { required: true, message: '请输入密码' },
              { minLength: 6, message: '密码至少需要6个字符' }
            ]}
          >
            <Input.Password
              prefix={<IconLock />}
              placeholder="请输入密码"
            />
          </FormItem>

          <FormItem
            label="确认密码"
            field="confirmPassword"
            dependencies={['password']}
            rules={[
              { required: true, message: '请确认密码' },
              {
                validator: (value, callback) => {
                  if (value !== form.getFieldValue('password')) {
                    callback('两次输入的密码不一致');
                  }
                  callback();
                }
              }
            ]}
          >
            <Input.Password
              prefix={<IconLock />}
              placeholder="请再次输入密码"
            />
          </FormItem>

          <FormItem
            label="姓名"
            field="name"
            rules={[{ required: true, message: '请输入姓名' }]}
          >
            <Input
              placeholder="请输入姓名"
            />
          </FormItem>

          <FormItem
            label="身份证号"
            field="idNumber"
            rules={[
              { required: true, message: '请输入身份证号' },
              {
                match: /^[1-9]\d{5}(19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/,
                message: '请输入有效的身份证号'
              }
            ]}
          >
            <Input
              prefix={<IconIdcard />}
              placeholder="请输入身份证号"
            />
          </FormItem>

          <FormItem
            label="手机号"
            field="phone"
            rules={[
              { required: true, message: '请输入手机号' },
              { match: /^1[3-9]\d{9}$/, message: '请输入有效的手机号' }
            ]}
          >
            <Input
              prefix={<IconPhone />}
              placeholder="请输入手机号"
            />
          </FormItem>

          <FormItem>
            <Button type="primary" htmlType="submit" long loading={loading} size="large">
              注册
            </Button>
          </FormItem>

          <div className="text-center mt-4">
            <Text type="secondary">已有账户？</Text>{' '}
            <Link href="/login" className="text-blue-600 hover:text-blue-800">
              立即登录
            </Link>
          </div>
        </Form>
      </Card>
    </div>
  );
}